<template>
    <title-box title="发电概况">
        <ul :class="{ 'x-target-list': true, 'columns-3': !props.isStation, 'columns-4': props.isStation }">
            <li>
                <h4 class="x-target-title">当日发电量</h4>
                <div class="x-target-content">
                    <span>{{ toFixed(power.totalTodayElectricity) }}</span>
                    <sub>KWh</sub>
                </div>
            </li>
            <li>
                <h4 class="x-target-title">本月发电量</h4>
                <div class="x-target-content">
                    <span>{{ toFixed(power.totalMonthElectricity) }}</span>
                    <sub>KWh</sub>
                </div>
            </li>
            <li>
                <h4 class="x-target-title">当年发电量</h4>
                <div class="x-target-content">
                    <span>{{ toFixed(power.totalYearElectricity) }}</span>
                    <sub>KWh</sub>
                </div>
            </li>
            <li>
                <h4 class="x-target-title">累计发电量</h4>
                <div class="x-target-content">
                    <span>{{ toFixed(power.totalElectricity) }}</span>
                    <sub>KWh</sub>
                </div>
            </li>
            <li>
                <h4 class="x-target-title">当前总功率</h4>
                <div class="x-target-content">
                    <span>{{ toFixed(power.totalPower) }}</span>
                    <sub>KW</sub>
                </div>
            </li>
            <li>
                <h4 class="x-target-title">总装机容量</h4>
                <div class="x-target-content">
                    <span>{{ toFixed(power.totalCapacity) }}</span>
                    <sub>KW</sub>
                </div>
            </li>
            <li v-if="props.isStation">
                <h4 class="x-target-title">当日收益</h4>
                <!-- 收益追加 money -->
                <div class="x-target-content money">
                    <span>{{ toFixed(power.totalTodayElectricity * power.electricCharge) }}</span>
                    <sub>元</sub>
                </div>
            </li>
            <li v-if="props.isStation">
                <h4 class="x-target-title">累计收益</h4>
                <!-- 收益追加 money -->
                <div class="x-target-content money">
                    <span>{{ toFixed(power.totalElectricity * power.electricCharge) }}</span>
                    <sub>元</sub>
                </div>
            </li>
        </ul>
    </title-box>
</template>
<script setup>
import { computed, reactive, watch } from 'vue'
import TitleBox from './../TitleBox/index.vue'
import { queryElectricity } from '/@/api/Iframe/Home/index.js'
import { SUCCESS_CODE } from '@iframe/tools/axios/axios.js'
import { clone } from '@iframe/tools/utils/Tools.js'

const power = reactive({})
const props = defineProps({
    stationId: {
        type: Number
    },
    isStation: {
        type: Boolean,
        default: false
    }
})

const toFixed = computed(() => {
    return power => {
        return power ? power.toFixed(2) : '0.00'
    }
})

const getElectricity = () => {
    if (!props.isStation) {
        queryElectricity().then(result => {
            if (result.code === SUCCESS_CODE) {
                clone(power, result.data)
            }
        })
    } else {
        if (props.stationId) {
            queryElectricity({ stationId: props.stationId }).then(result => {
                if (result.code === SUCCESS_CODE) {
                    clone(power, result.data)
                }
            })
        }
    }
}
watch(
    () => props.stationId,
    () => {
        getElectricity()
    }
)
getElectricity()
</script>
